<template>
  <div>
    <div class="mb-3">
      <el-button
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        type="primary"
        @click="edit()"
      >
        增加员工
      </el-button>
    </div>
    <loading-wrap>
      <el-table border :data="tableData">
        <el-table-column align="center" label="部门">
          <template slot-scope="scope">
            {{ deptNameList[scope.row.datum_customer_dept_id] || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="岗位类型">
          <template slot-scope="scope">
            {{ enumPostType[scope.row.post_type] || '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="人员类型" prop="person_type">
          <template slot-scope="scope">
            <span v-if="scope.row.post_type && scope.row.person_type && scope.row.post_type < 4">
              {{ enumStaffType[scope.row.post_type][scope.row.person_type] }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="人数" prop="person_number">
          <template slot-scope="scope">
            <span>{{ scope.row.person_number || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最高工作年限" prop="coo_years">
          <template slot-scope="scope">
            <span>{{ scope.row.coo_years || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职称级别" prop="positio_type">
          <template slot-scope="scope">
            {{ enumPositioType[scope.row.positio_type] || scope.row.positio_type }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="customerData.project_status === '0' || customerData.project_status === '2'"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button class="py-0 px-1" type="text" @click="edit(scope.row)">
              <i class="fa fa-edit"></i>
            </el-button>
            <el-button class="py-0 px-1 text-danger" type="text" @click="deleteData(scope.row)">
              <i class="fa fa-trash"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </loading-wrap>
    <form-component
      ref="fc"
      :auto-init="false"
      :form-data="formData"
      :table-data="editData"
      :table-id="tableId"
      :table-name="tableName"
      :visible.sync="editVisible"
      @success="getData"
    ></form-component>
  </div>
</template>
<script>
import FormComponent from '@/components/FormComponent'
import SelectCustomerDept from '@/credit/components/select/SelectCustomerDept'

import SelectPositioType from '@/credit/components/select/SelectPositioType'
import { enumPositioType, enumPostType, enumStaffType } from '@/credit/plugins/enum'

export default {
  components: {
    FormComponent,
  },
  props: {},
  data() {
    return {
      enumPostType,
      enumPositioType,
      enumStaffType,
      tableName: 'datum_customer_business_emp',
      tableData: [],
      formData: {
        post_type: {
          label: '岗位类型',
          type: 'radio',
          enumType: enumPostType,
          required: true,
          inline: true,
          value: '1',
          onClick: v => {
            const ref = this.$refs.fc
            ref.setKey('person_type', 'enumType', enumStaffType[v])
          },
        },
        person_type: {
          label: '人员类型',
          type: 'radio',
          enumType: enumStaffType[1],
          required: true,
          inline: true,
          value: '1',
        },
        datum_customer_dept_id: {
          type: 'component',
          value: '',
          label: '所属部门',
          component: SelectCustomerDept,
          attrs: {
            class: 'form-control-ml w-100',
          },
        },
        person_number: { label: '人数', type: 'number', step: 1, unit: '人' },
        coo_years: { label: '最高工作年限', type: 'number', unit: '年', step: 1 },

        positio_type: {
          type: 'component',
          label: '职称级别',
          value: '',
          component: SelectPositioType,
          required: false,
          attrs: { css: 'form-control-ml w-100' },
        },
      },
      editData: {},
      editVisible: false,
      tableId: '',
      deptNameList: {},
    }
  },
  computed: {},
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.$api
        .getData('credit', this.tableName, { 'customer_related_id.eq': this.id })
        .then(res => {
          this.tableData = res.data
        })
      this.$store.dispatch('getCustomerDept', this.id).then(res => {
        res.forEach(item => {
          this.$set(this.deptNameList, item.datum_customer_dept_id, item.dept_name)
        })
      })
    },
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.datum_customer_business_emp_id : ''
      this.editData = p
    },
    deleteData(item) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('span', undefined, `确定删除？`),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            const res = await this.$utils.promise(
              this.$api.deleteData('credit', this.tableName, item.datum_customer_business_emp_id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
            if (res) {
              this.$message.success('删除成功！')
              this.getData()
              done()
            } else {
              this.$message.error('删除失败，请重试！')
            }
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style scoped></style>
